<template>
  <div class="main-container-app">
    <el-row class="form-contain" >
    <query-form @handleQueryOrg="handleQueryOrg"></query-form>
    </el-row>
    <div class="table-contain">
    <org-table :searchList="orgRes" :listLoadingOrg="loading"
               @handleSizeChangeOrg="handleSizeChangeOrg"
               @handleCurrentChangeOrg="handleCurrentChangeOrg"></org-table>
    </div>
  </div>

</template>

<script>
  /* eslint-disable */
  import QueryForm from './organizationChild/QueryForm'
  import orgTable from './organizationChild/orgTable'
  import {fetchListOrg} from "../../api/organization/organization";
  import {selDictonaryValue} from "../../api/dictionary";

  export default {
    components: {
      QueryForm,
      orgTable
    },
    data() {
      return {
        orgRes: null,
        loading: false,
        queryDataOrg:{
          orgbh: '',
          orgname: '',
          orglevel : '',
          parentorg: '', orgtype: '', header: ''
        },
        listQuery: {
          page: 1,
          limit: 20
        }
      }
    },
    methods:{
      handleQueryOrg(val){
        this.queryDataOrg=val
        this.listQuery.page=1
        this.listQuery.limit=20
        this.getDataListOrg()
      },
      handleCurrentChangeOrg(val) {
        this.listQuery.page = val
        this.getDataListOrg()
      },
      handleSizeChangeOrg(val) {
        this.listQuery.limit = val
        this.listQuery.page = 1
        this.getDataListOrg()
      },
      getDataListOrg(){
        this.loading=true
        fetchListOrg(this.listQuery,this.queryDataOrg).then(res=>{
          selDictonaryValue(res).then(response=>{
            console.log(res)
            this.orgRes=response
            this.loading=false
          })
        })
      }
    }
  }

</script>

<style scoped>
  .organization {
    padding: 32px;
    background-color: rgb(240, 242, 245);
  }
</style>

